<template>
  <div class="weather">
    <div class="weather-content">
      <div class="time">
        <div></div>
        <div>{{ time }}</div>
      </div>
      <div class="weather-nums">
        <div>
          <span>温度</span>
          <span>{{ weathers.today.temperature }}℃</span>
        </div>
        <div>
          <span>湿度</span>
          <span>{{ weathers.today.humidity }}%</span>
        </div>
      </div>
      <div class="weather-fun">
        <div>
          风向：{{ weathers.today.windDirection }}
        </div>
        <div>风力：{{ weathers.today.windPower }}</div>
        <div>天气： {{ weathers.today.weather }}</div>
        <!-- <div>PM2.5：0.0</div>
        <div>ph10：0.0</div>
        <div>co：0.0</div> -->
      </div>
      <div class="daymis">明日气象预报</div>
      <div class="weather-nums">
        <div>
          <span>白天温度</span>
          <span>{{ weathers.tomorrow.dayTemp }}℃</span>
        </div>
        <div>
          <span>夜晚温度</span>
          <span>{{ weathers.tomorrow.nightTemp }}℃</span>
        </div>
      </div>
      <div class="weather-fun">
        <div>
          风向：{{ weathers.tomorrow.windDirection }}
        </div>
        <div>风力：{{ weathers.tomorrow.windPower }}</div>
        <div>天气：{{ weathers.tomorrow.weather }}</div>

      </div>
    </div>
  </div>
</template>

<script setup>

import { getWeatherInfo } from '@/apis/weatherInfo/weatherInfo';
import { ref } from 'vue';
import { onMounted, onUnmounted } from 'vue'

let timer = null

const weathers = ref({
  today: {
    weather: '',
    temperature: '',
    windDirection: '',
    windPower: '',
    humidity: '',
  },
  tomorrow: {
    weather: '',
    windPower: '',
    dayTemp: '',
    nightTemp: '',
    windDirection: ''
  }
})

const fetchWeatherInfo = async () => {
  try {
    const res = await getWeatherInfo()
    const data = res.data.data

    // 更新 today 数据
    weathers.value.today = {
      weather: data.weather,
      temperature: data.temperature,
      windDirection: data.windDirection,
      windPower: data.windPower,
      humidity: data.humidity
    }

    // 更新 tomorrow 数据
    weathers.value.tomorrow = {
      weather: data.forecast.dayWeather,
      windPower: data.forecast.dayWindPower,
      dayTemp: data.forecast.dayTemp,
      nightTemp: data.forecast.nightTemp,
      windDirection: data.forecast.dayWindDirection
    }
  } catch (error) {
    console.error('天气数据获取失败:', error)
  }
}

const time = ref(new Date().toLocaleString())

setInterval(() => {
  time.value = new Date().toLocaleString()
}, 1000)

// 组件挂载时启动
onMounted(() => {
  // 立即执行一次
  fetchWeatherInfo()

  // 设置每小时执行一次的定时器（单位：毫秒）
  timer = setInterval(fetchWeatherInfo, 60 * 60 * 1000) // 3600000ms = 1小时
})

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) clearInterval(timer)
})

</script>

<style lang="less" scoped>
.weather {
  width: 5.625rem;
  height: 3.75rem;
  background-image: url(../assets/imgs/bee_right_top.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: .75rem .25rem .25rem;
  box-sizing: border-box;

  .time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .15rem;
    padding-top: .125rem;
    box-sizing: border-box;
  }

  .weather-nums {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: .125rem;
    padding-bottom: 0px;
  }

  .weather-nums>div {
    display: flex;
  }

  .weather-nums>div>span:nth-child(1) {
    font-size: .1875rem;
  }

  .weather-nums>div>span:nth-child(2) {
    font-size: .25rem;
    color: #ffcc00;
    font-weight: 700;
    margin-left: 23px;
  }

  .weather-fun {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .weather-fun>div {
    width: 1.25rem;
    height: .25rem;
    background: #00203d;
    /* box-shadow: inset -10px 1px 10px 1px #00559a; */
    border-radius: .2375rem;
    /* border: 1px solid #52ffff; */
    font-size: .15rem;
    text-align: center;
    line-height: .25rem;
    margin-top: .125rem;
  }

  .daymis {
    text-align: center;
    margin-top: .125rem;
    font-size: .2rem;
  }
}
</style>